<style lang="less">
  .catshWeb {
    .marginTopBottom {
      margin-top: 15px;
      margin-bottom: 15px;
    }
  }
</style>
<template>
  <el-dialog :visible.sync="innerVisible" :title="title" width="550px" center :close-on-click-modal="false">

    <el-row class="catshWeb">
      <el-col :span="24">
        <el-form :model="model" :rules="rules" ref="ruleForm" class="el-form-col" label-width="100px" label-position="left">
          <el-row>
            <template v-if="active == 1">
              <!--<el-col class="col-xs-8 col-xs-offset-1">-->
              <el-col :span="18" :offset="3">
                <el-form-item label="提现金额" prop="inputMoney">
                  <el-input v-model="model.inputMoney" :placeholder="'可提现余额为：' + showTotal + '元'" style="position:relative;"></el-input>
                  <a href="javascript:;" @click="getTotalMoney()" style="position:absolute;right: -60px; top:0px;text-decoration: none;color:#32c5d2"> 全部提现 </a>
                </el-form-item>
              </el-col>
              <!--<el-col class="col-xs-8 col-xs-offset-1">-->
              <el-col :span="18" :offset="3">
                <el-form-item label="银行卡" prop="bankType">
                  <el-select v-model="model.bankType" placeholder="请选择银行卡">
                    <el-option v-for="item of newBankList" :label="item.text" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!--<div class="col-xs-4 col-xs-offset-2"><span style="color:#c4c5d6">余额：{{totalMoney}} 元</span></div>-->
              <el-col :span="8" :offset="3"><span style="color:#c4c5d6">余额：{{totalMoney}} 元</span></el-col>

              <!--<div class="col-xs-5" style="color:#c4c5d6">最高提现金额：{{totalMoney - 0.5|decimalNumFilter}}  元</div>-->
              <el-col :span="10" :offset="2" style="color:#c4c5d6">最高提现金额：{{showTotal}}  元</el-col>

              <!--<div class="col-xs-10 col-xs-offset-2" style="margin-top: 5px;color:#c4c5d6"><span>(手续费:   0.5元/笔)</span></div>-->
              <el-col :span="20" :offset="4" style="margin-top: 5px;color:#c4c5d6"><span>(手续费:   0.5元/笔)</span></el-col>

              <!--<el-col class="col-xs-4 col-xs-offset-2">-->
              <el-col :span="10" :offset="4">
                <el-button type="button" class="btn btn-block btn-success" style="background-color: #ebedf2" @click="hide">取消</el-button>
              </el-col>
              <!--<div class="col-xs-4">-->
              <el-col :span="8">
                <el-button class="btn-block" type="primary"  style="margin-bottom: 10px;" @click="submit()">提现</el-button>
              </el-col>
            </template>

            <template v-if="active == 2">
              <el-col :span="18" :offset="4">
                <el-form-item label="钱包密码:" prop="pass" :rules="[
               { required: true, message: '请输入钱包密码', trigger: 'blur' },
               { validator: isInteger, message: '请输入整数', trigger: 'blur' },
               { validator: range, isString: true, min: 1, max: 6, message: '请输入6位以内的整数', trigger: 'blur' }
            ]">
                  <el-input type="password" v-model="model.pass" placeholder="请输入6位钱包密码"></el-input>
                </el-form-item>
              </el-col>
              <el-col el-col :span="8" :offset="10" style="margin-top: 20px;">
                <el-button  type="primary" class="btn btn-block"  :loading="loading"
                            @click="submit()">确认</el-button>
              </el-col>
            </template>
            <template v-if="active == 3">
              <el-col :span="18" :offset="6">提现金额：&nbsp;&nbsp;&nbsp;<span class="font-red">{{model.inputMoney}} 元</span></el-col>
              <el-col :span="18" :offset="6" class="marginTopBottom">银行卡：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="font-red">{{newBankList[0].text}}</span></el-col>
              <el-col :span="18" :offset="6" class="marginTopBottom">提交时间:&nbsp;&nbsp;&nbsp; {{postTime | unixTimestampFilter}}</el-col>
              <el-col :span="18" :offset="6" class="marginTopBottom">系统正在处理....，预计两个工作日内到账</el-col>
              <el-col :span="18" :offset="10" class="marginTopBottom">
                <el-button  type="primary" class="btn btn-block" @click="submit()">确定</el-button>
              </el-col>
            </template>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>

import {dotData} from '@/utils'
import {isFormatNumber, range, isInteger} from '@/utils/validate'
import {filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter} from '@/filters'
export default{
  components: {
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter,
    decimalNumFilter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    totalMoney: {
      type: Number,
      default: 100
      // required: true
    },
    newBankList: {
      type: Array,
      required: true
    },
    defaultCard: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      innerVisible: false,
      loading: false,
      active: 1,
      pswMsg: '',
      postTime: '',
      model: {
        inputMoney: '', // 金额
        bankType: this.defaultCard, // 默认银行卡
        pass: ''
      },
      // 密码验证规则
      rules2: {
        pass: [
          { required: true, message: '请输入钱包密码', trigger: 'blur' },
          { validator: isInteger, message: '请输入整数', trigger: 'blur' },
          { validator: range, isString: true, min: 1, max: 6, message: '请输入6位以内的整数', trigger: 'blur' }
        ]}
    }
  },
  created() {
    console.log('传进modal来的默认卡', this.defaultCard)
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    },
    // 监听传进来的默认卡，把最新值 赋给model(element的方式)
    defaultCard(newVal, oldVal) {
      this.$set(this.model, 'bankType', newVal)
    }
  },
  computed: {
    showTotal() {
      if (this.totalMoney <= 0.5) {
        return 0
      }
      return decimalNumFilter(this.totalMoney - 0.5)
    },
    title() {
      if (this.active === 1) {
        return '提现'
      }
      if (this.active === 2) {
        return '钱包密码'
      }
      if (this.active === 3) {
        return '提现'
      }
    },
    // 需要使用到 父组件传进来的余额totalMoney,所以不能写死在data初始化里面，要'计算'而来
    rules() {
      return {
        inputMoney: [
          { required: true, message: '请输入提现金额', trigger: 'change' },
          { validator: isFormatNumber, int: 8, decimal: 2, message: '请输入8位以下整数或2位小数', trigger: 'blur' },
          { validator: range, min: 0.01, message: '请输入大于0的正数', trigger: 'blur' },
          //            { validator: range, max: this.totalMoney - 0.5, message: '扣除手续费可提现金额为：' + (this.totalMoney - 0.5), trigger: 'blur' }
          { validator: range, max: decimalNumFilter(this.totalMoney - 0.5), message: '输入金额超出最高可提金额', trigger: 'blur' }
        ],
        bankType: [
          { required: true, message: '请选择提现银行卡', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    isInteger,
    range,
    hide() {
      this.$refs.ruleForm.resetFields()
      this.innerVisible = false
    },
    httpPost() {
      let userDat = {}
      userDat.money = this.model.inputMoney
      userDat.bankId = this.model.bankType
      userDat.password = this.model.pass
      console.log('提现的提交参数', userDat)
      this.loading = true
      // /ms-user-wallet/wallet/withdrawal
      this.$ajax.post('/ms-user-wallet/wallet/withdrawal', userDat).then(response => {
        this.loading = false
        console.log('response.data', response.data)
        this.postTime = dotData(response, 'data.foundtime')
        const success = dotData(response, 'success')
        if (success) {
          this.active = 3
        }
      })
    },
    submit() {
      this.$refs.ruleForm.validate(result => {
        if (!result) {
          return
        }
        if (this.active === 1) { // 去 输密码 web
          this.$emit('refresh', true) // 实时显示首页最新余额
          this.active = 2
        } else if (this.active === 2) { // post提交表单
          this.httpPost()
        } else if (this.active === 3) {
          this.$emit('refresh', true)
          this.innerVisible = false
        }
      })
    },
    // 重置 重新输入密码
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getTotalMoney() {
      if (this.totalMoney <= 0.5) {
        this.model.inputMoney = 0
      } else {
        this.model.inputMoney = decimalNumFilter(this.totalMoney - 0.5)
      }
    }
  }
}
</script>
